<template>
  <div style="max-width:1000px;margin:0 auto;">
    <div class="bypassFatherBox">
      <el-descriptions class="margin-top" :column="1" size="samll" border>
        <el-descriptions-item>
          <template slot="label">{{$t('bypass 功能')}}</template>
          <el-switch :width="lang === 'zh'?55:70" class="status switch" v-model="status" @change="switchChange" active-color="#009966" inactive-color="#CCCCCC" active-value="on" inactive-value="off" :active-text="$t('开启')" :inactive-text="$t('关闭')"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">{{$t('提示')}}</template>
          <span style="color:red;">{{$t('管理口强制开启bypass,管理页面将失去连接,请谨慎操作!!!')}}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-table size='mini' ref="multipleTable" :data="bypassList" tooltip-effect="dark" style="width: 100%;">
      <el-table-column prop="id" :label="$t('接口对ID')" align='center'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.id" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('接口对')" align='center'>
        <el-table-column prop="name1" :label="$t('接口名1')" align='center'>
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.name1" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="name2" :label="$t('接口名2')" align='center'>
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.name2" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="mode" :label="$t('控制方式')" align='center' width="400">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.mode" @change="radioChange(scope.row)" :disabled="status === 'off'">
            <el-radio label="on" :class="'on' + (scope.$index + 1)">{{$t('强制开启')}}</el-radio>
            <el-radio label="off" :class="'off' + (scope.$index + 1)">{{$t('强制关闭')}}</el-radio>
            <el-radio label="auto" :class="'auto' + (scope.$index + 1)">{{$t('自动开启')}}</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getBypassStatus, getBypassInfo, setBypassStatus, setBypassInfo } from '@/api/network/highAvailability/bypass'
export default {
  name: 'Bypass',
  data () {
    return {
      bypassList: [],
      status: 'off',
      lang: this.$i18n.locale
    }
  },
  created () {
    this.listData()
  },
  methods: {
    // 列表
    listData () {
      getBypassStatus().then(res => {
        if (res.status === 0) {
          this.status = res.info[0].global
        }
      })
      getBypassInfo().then(res => {
        if (res.status === 0) {
          this.bypassList = res.info
        }
      })
    },
    radioChange (row) {
      setBypassInfo({ id: row.id, mode: row.mode }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('设置成功！'))
        }
      })
    },
    switchChange () {
      setBypassStatus({ status: this.status }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('设置成功！'))
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bypassFatherBox {
  margin: 20px 0;

  .el-switch {
    margin-left: 15px;
  }
}</style>
